<template>
    <div class="box">
        <div class="dt-header">
            <h3>{{ imgDetail.title }}</h3>
            <p class="mui-ellipsis">
                <span>发表时间：{{ imgDetail.formDateTime | formatDate }}</span>
                <span>点击：{{ imgDetail.num }}次</span>
            </p>
        </div>
        <div class="dt-content">
            <div class="img-list">
                <!--<img :src="item" alt="" v-for="item in imgDetail.realImgUrl">-->
<!--                <img class="preview-img" :src="item.src" alt="" v-for="(item, index) in thumbs"
                height="100px" @click="$preview.open(index, list)" :key="item.src">-->
                <div class="img-small" ref="imgSmall"><vue-preview :slides="thumbs" ></vue-preview></div>
            </div>
            <span>{{ imgDetail.zhaiYao }}</span>
        </div>
        <box-comment :articleId="cntId"></box-comment>
    </div>
</template>

<script>

    import comment from "../subcomponents/comment.vue"

    export default {
        name: "PhotoDetail",
        data() {
            return {
                cntId: this.$route.params.id,
                imgDetail: {},
                thumbs: [
                    // {
                    //     src:"http://localhost:8080/upload/img_share/JJSH/detail/0b2b446b6d5247e29b5d0df639f90cea.jpg",
                    //     msrc:"http://localhost:8080/upload/img_share/JJSH/detail/0b2b446b6d5247e29b5d0df639f90cea.jpg",
                    //     alt: 'picture1',
                    //     // title: 'Image Caption 1',
                    //     w: 600,
                    //     h: 400,
                    // },
                    // {
                    //     src:"http://localhost:8080/upload/img_share/JJSH/detail/0b2b446b6d5247e29b5d0df639f90cea.jpg",
                    //     msrc:"http://localhost:8080/upload/img_share/JJSH/detail/0b2b446b6d5247e29b5d0df639f90cea.jpg",
                    //     alt: 'picture1',
                    //     // title: 'Image Caption 1',
                    //     w: 600,
                    //     h: 400
                    // },
                ],

            }
        },
        created() {
            this.getImgDetail();
            this.getThumbs();
        },
        mounted() {
            let imgSmall = this.$refs.imgSmall;
            console.log((imgSmall.scrollWidth - 40) / 3);
        },
        methods: {

            getImgDetail() {
                this.$http.get("imgDetail.main?cntId=" + this.cntId).then(function (result) {
                    if (result.status === 200) {
                        // console.log(result);
                        this.imgDetail = result.body;
                    }
                })
            },

            // 获取缩略图
            getThumbs() {
                this.$http.get("thumbs.main?cntId=" + this.cntId).then((result) => {
                    if(result.status === 200) {
                        console.log(result.body);
                        this.thumbs = result.body;
                    }
                })
            }
        },
        components: {
            "boxComment": comment
        }
    }
</script>

<!--使用 vue-preview不能加scoped-->
<style lang="scss">
    .dt-header {
        padding: 10px 10px;
        h3 {
            padding: 0 10px;
            font-size: 15px;
            /*text-align: center;*/
            color: #4a82d1;
            font-weight: bold;
            line-height: 20px;
        }
        p {
            padding: 10px 0;
            border-bottom: 2px solid #d8d8d8;
            /*color: #4a82d1;*/
            display: flex;
            justify-content: space-between;
        }
    }

    .dt-content {
        padding: 5px;
        color: #c0c0c0;
        font-size: 14px;
        .img-small {
                figure {
                    display: inline;
                    img {
                        vertical-align: top;
                        min-width: 29%;
                        max-width: 29%;
                        min-height: 100px;
                        max-height: 100px;
                        margin-left: 10px;
                        margin-bottom: 10px;
                        box-shadow: 0 0 10px #999999;
                    }
                }
        }
        figure {
             margin: 0;
        }
        span {
            line-height: 25px;
            color: #000;
        }
    }
</style>